<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="box">

        <div class="inp-box">
            <input id="inp" class="inp" type="text" placeholder="简单计算器">
        </div>
        <ul class="list">
            <li onclick="clearText();">C</li>
            <li>CE</li>
            <li onclick="showData('%')">%</li>
            <li onclick="showData('/')">/</li>
            <li onclick="showData(7)">7</li>
            <li onclick="showData(8)">8</li>
            <li onclick="showData(9)">9</li>
            <li onclick="showData('*')">x</li>

            <li onclick="showData(4)">4</li>
            <li onclick="showData(5)">5</li>
            <li onclick="showData(6)">6</li>
            <li onclick="showData('-')">-</li>
            <li onclick="showData(1)">1</li>
            <li onclick="showData(2)">2</li>
            <li onclick="showData(3)">3</li>
            <li onclick="showData('+')">+</li>

            <li style="width: 210px;" onclick="showData(0)">0</li>
            <li onclick="showData('.')">.</li>
            <li onclick="compute();">=</li>
        </ul>
    </div>

    <script>
        // 显示屏元素
        var $inp = document.getElementById('inp');

        // 显示计算式子
        var str = '';

        function showData(num) {
            str += num;
            $inp.value = str;
        }

        // 清除
        function clearText() {
            // 清除变量的值
            str = '';
            // 清除输入框的值
            $inp.value = '';
        }

        // 计算
        function compute() {
            $inp.value = eval($inp.value);
        }
    </script>

</body>


</html>